<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./20170601.css">
    <script src="./jQuery.js"></script>
    <script src="./js.js"></script>
    <title>轮播图</title>
    <style type="text/css">
*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
#wrapper{
    margin:0px auto;
    border:0px;
    padding:0px;
}
#show-area{
    width:970px;
    height:290px;
    position:relative;
    margin:0px auto;
    overflow:hidden;

}
#show-area ul{
    position:relative;
    width: 1940px;
    height:220px;
    transition: all ease 0.5s;

    /*transform: translate3d(-970px, 0px, 0px);*/
}

#show-area ul li{
    border: none;
    width:965px;
    height:280px;
    position: absolute;
    clear: both;
    float: left;

}

#show-area ul .sol_li_1 {
    left: 0
}

#show-area ul .sol_li_2 {
    left: 970px;
}
#show-area ul .sol_li_3 {
    left: 1940px;
}

#show-area ul .sol_div{
    float:left;
    width: 455px;
    height: 220px;
    overflow: hidden;
    font-size: 14px;
    float: left;
    border: 1px solid #d2d2d2;
    margin: 2px 7px;
    padding: 20px 5px;
}




    </style>
</head>


<script>
    (function(b,a,e,h,f,c,g,s){b[h]=b[h]||function(){(b[h].c=b[h].c||[]).push(arguments)};
    b[h].s=!!c;g=a.getElementsByTagName(e)[0];s=a.createElement(e);
    s.src="//s.union.360.cn/"+f+".js";s.defer=!0;s.async=!0;g.parentNode.insertBefore(s,g)
    })(window,document,"script","_qha",230529,false);
</script>




<body>
    <div id="wrapper">
        <div id="arrLeft" title="下一张"></div>
        <div id="arrRight" title="上一张"></div>
        <div id="show-area">
           
           <ul class="sol_ul">

               <li class="sol_li sol_li_1">
                   <div class="sol_div sol_1">
                       <div class="sol_left">
                           <img src="./yaoshi_1.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_1a.png">
                           </p>
                           <br>
                           <h2>全国执业药师资格考试用书</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
                   <div class="sol_div sol_2">
                       <div class="sol_left">
                           <img src="./yaoshi_2.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_2a.png">
                           </p>
                           <br>
                           <h2>全国执业药师资格考试用书</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
               </li>

               <li class="sol_li sol_li_2">
                   <div class="sol_div sol_3">
                       <div class="sol_left">
                           <img src="./yaoshi_3.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_3a.png">
                           </p>
                           <br>
                           <h2>全国执业药师资格考试用书</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
                   <div class="sol_div sol_4">
                       <div class="sol_left">
                           <img src="./yaoshi_4.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_4a.png">
                           </p>
                           <br>
                           <h2>全国执业药师资格考试用书</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
               </li>
               <li class="sol_li sol_li_3">
                   <div class="sol_div sol_3">
                       <div class="sol_left">
                           <img src="./yaoshi_3.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_3a.png">
                           </p>
                           <br>
                           <h2>111111</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
                   <div class="sol_div sol_4">
                       <div class="sol_left">
                           <img src="./yaoshi_4.png">
                       </div>
                       <div class="sol_right">
                           <p>
                               <img src="./yaoshi_4a.png">
                           </p>
                           <br>
                           <h2>111111</h2>
                           <dd>
                               <a>注册试听免费课程</a>
                           </dd>
                           <dt>
                               <a class="dt_a1">电子教案下载</a>
                               <a class="dt_a2">在线购买</a>
                               <a class="dt_a3">讲义下载</a>
                           </dt>
                       </div>
                   </div>
               </li>

             
           </ul>
           
            
            
        </div> 
      </div>
    <div class="content-3">
        <div class="user-info">
            <form method="post" onsubmit="alert('保存成功')" target="nm_iframe" action="http://www.iyaokao.com/show/cms_info/saveInfoUser.action">
                <input type="hidden" name="infoId" value="7">
                <input type="hidden" name="s1" value="22">
                <input type="text" class="yanzheng" name="input_22" oninput="check(this,'请输入中文姓名')" placeholder="请输入您的姓名" pattern="^[\u4e00-\u9fa5]*$" required>
                <input type="hidden" name="s1" value="23">
                <input type="tel" class="yanzheng" name="input_23" oninput="check(this,'请输入正确的电话号码')" placeholder="请输入您的电话" pattern="^1[34578]\d{9}$" required>
                <input type="hidden" name="s1" value="24">
                <input type="text" class="yanzheng" name="input_24" oninput="check(this,'请输入正确的专业名称')" placeholder="请输入您所学专业名称" pattern="^[\u4e00-\u9fa5]*$" required>
                <input type="hidden" name="s1" value="25">
                <input type="text" class="yanzheng" name="input_25" oninput="check(this,'请输入您毕业的年限')" placeholder="请输入您的毕业年限" pattern="^[0-9]*$" required>
                <input type="hidden" name="s1" value="26">
                <input type="text" name="input_26" placeholder="请输入您要报考的科目名称" required>
                <div>
                    <input type="submit" value="">
                </div>
            </form>
            <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
        </div>

    </div>
    <div id="bktj_if">
        <form id="feedBackForm2" method="post" onsubmit="alert('保存成功')" target="ns_iframe" action="http://www.iyaokao.com/show/cms_info/saveInfoUser.action">
            <input type="hidden" name="infoId" value="7">
            <input type="hidden" name="s1" value="22">
            <ul class="bktj_if_ul">
                <li>
                    <select id="UserEducation" type="text" name="UserEducation" maxlength="15" class="bktj_if_li" value="请选择你的学历">
                        <option value="请选择你的学历">请选择你的学历</option>
                        <option value="高中">高中</option>
                        <option value="中专">中专</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>

                    </select>
                </li>
                <li>
                    <!--<input type="text" class="bktj_if_li" name="input_24" oninput="check(this,'请输入正确的专业名称')" placeholder="请输入您所学专业名称" pattern="^[\u4e00-\u9fa5]*$" required>-->

                    <input id="UserSpecialty" type="text" name="input_24"  class="bktj_if_li" placeholder="请输入您所学专业名称" pattern="^[\u4e00-\u9fa5]*$" required>
                </li>
                <li>
                    <!--<input type="text" class="bktj_if_li" name="input_25" oninput="check(this,'请输入您毕业的年限')" placeholder="请输入您的毕业年限" pattern="^[0-9]*$" required>-->

                    <input type="text" id="UserName" name="input_25"  class="bktj_if_li" placeholder="请输入您的毕业年限" pattern="^[0-9]*$" required>
                </li>
                <li>
                    <!--<input type="tel" class="bktj_if_li" name="input_23" oninput="check(this,'请输入正确的电话号码')" placeholder="请输入您的电话" pattern="^1[34578]\d{9}$" required>-->

                    <input id="UserPhone" type="text" name="input_23"  class="bktj_if_li"placeholder="请输入您的电话" pattern="^1[34578]\d{9}$" required>

                </li>
            </ul>
            <input name="立即查询" type="button"  value="立即查询"  class="nanniu_bj" >
            <!-- <img id="vali_img" title="点击刷新" src="http://www.eoffcn.com/yanzheng/codephone.php?0.16593838098944302" align="absbottom" onclick="this.src='http://www.eoffcn.com/yanzheng/codephone.php?'+Math.random();"> -->
        </form>
        <iframe id="is_iframe" name="ns_iframe" style="display:none;"></iframe>

    </div>

    <script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1"></script>
    <script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1"></script>
    <script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1"></script>

    <script type="text/javascript">
        $(".nanniu_bj").click(function(){
            var regex1 = /^[\u4e00-\u9fa5]/;
            var regex2 = /^[0-9]*$/;
            var regex3 = /^1[34578]\d{9}$/;
            var inputField = document.getElementById('UserSpecialty');
            var userName = document.getElementById('UserName');
            var userPhone = document.getElementById('UserPhone');
            if(inputField.value ==""){
                alert("请输入姓名");
            }else{
                if(!regex1.test(inputField.value)){
                alert("请输入正确的姓名");
                }else{
                    if(userName.value ==""){
                        alert("请输入毕业年限");
                    }else{
                    if(!regex2.test(userName.value)){
                        alert("请输入正确毕业年限");
                    }else{
                        if(userPhone.value ==""){
                    alert("请输入手机号码");
                     }else{
                    if(!regex3.test(userPhone.value)){
                    alert("请输入正确的手机号码");
                    }
                    }
                    }
                    alert("提交成功！")
                   tijiao();
                    
            }
            }
            }
           
            
       
           
        })

     function submit(callback){
            document.getElementById("feedBackForm2").submit();
            callback();
        }

        function reset(){
            document.getElementById("feedBackForm2").reset();
        }
        function tijiao(){
            submit(reset);
        }
     

       
    
        


    // function check(item,tip){
        
    //     if(item.validity.patternMismatch === true){
    //         item.setCustomValidity(tip);
    //     }else{
    //         item.setCustomValidity('');
    //     }
        
    // }


    var idx = 0;
    var $ul = $('.sol_ul');
    var $li1 = $('.sol_li_1');
    var $li2 = $('.sol_li_2');
    var $li3 = $('.sol_li_3');
    var width = 970;
//    setInterval(function() {
//        idx++;
//        console.log(idx)
//        var width = idx*970;
//        console.log(width)
//        $ul.css({'transform': 'translate3d(-'+ width +'px, 0px, 0px)'});
//
//        var w1 = width + 970 ;
//
//
//        if(idx % 2 == 0) {
//            $li2.css({'left' : w1+'px'});
//        } else {
//            $li1.css({'left' : w1+'px'});
////            $li3.css({'left' : w1+'px'});
//
//        }
//
//    },10000)


    $('#arrLeft').on('click',function(){
        //每次+1
        idx++;
        //通过索引乘以移动像素值，那么就得到了移动的步位
        $ul.css({ transform:'translate3d(-'+ (idx * width) +'px,0,0);transition-duration: 0.3s;' });
        //这里的判断是衔接的关键所在，如果当前索引已经是最后一个dom了,也就是我们clone好的这个dom了，那就说明已经需要开始重新开始新的一轮了
        if(idx == $('.sol_ul li').size() - 1){
            //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作
            setTimeout(function () {
                //重置索引为1,相当于重头开始
                idx = 1;
                //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;
                $ul.css({transform: 'translate3d(-' + (idx * width) + 'px,0,0);transition-duration: 0s;'})
            }, 300);
        }
    });

    //右移动
    $('#arrRight').on('click',function(){
        //每次减一
        idx--;
        //通过索引乘以移动像素值，那么就得到了移动的步位
        $ul.css({ transform:'translate3d(-'+ (idx * width) +'px,0,0);transition-duration: 0.3s;' });
        //这里的判断是衔接的关键所在,跟向右移是一个意思，等于0的时候就是到了clone的dom了，也就需要重新开始新的一轮了
        if(idx === 0) {
            //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作
            setTimeout(function () {
                //这里就需要设置到除去两个clone的dom之外的最后一个dom索引来
                idx = $('.sol_ul li').size() - 2;
                //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;
                $('.sol_ul').css({transform: 'translate3d(-' + (idx * width) + 'px,0,0);transition-duration: 0s;'})
            }, 300);
        }
    });

//
//    $("#arrLeft").on("click",function(){
//        idx--;
//        var width = idx*970;
//        console.log(width)
//        $ul.css({'transform': 'translate3d('+ width +'px, 0px, 0px)'});
//        if(idx % 2 == 0){
//            $li2.css({'left' : -width+'px'});
//            $li1.css({'left' : width+'px'})
//        }else {
//            $li1.css({'left' : -width+'px'});
//            $li2.css({'left' : width+'px'})
//        }
//    })
//
//
//    $("#arrRight").on("click",function(){
//        idx++;
//        var width = idx*970;
//        console.log(width)
//        $ul.css({'transform': 'translate3d(-'+ width +'px, 0px, 0px)'});
//
////        var w1 = width + 970 ;
//        if((idx-1) % 2 == 0){
//            $li2.css({'left' : -width+'px'});
//            $li1.css({'left' : width+'px'})
//        }else {
//            $li1.css({'left' : -width+'px'});
//            $li2.css({'left' : width+'px'})
//
//        }
//    })



    </script>
</body>
</html>